<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            DOM：document object model 文档对象模型
                节点类型：
                    元素节点 <div></div>
                    属性节点 id = 'div1'
                    文体节点 div文本  (通过元素节点的子节点获取)

                元素节点的获取
                    document.getElementById('div1')  返回值只有一个
                        访问class  需要通过className
                    node.getElementsByTagName(标签名)
                    node.getElementsByClassName(class名字)
                    document.getElementsByName(name属性的值)
                    document.querySelector() 返回符合条件的第一个元素节点
                    document.querySelectorAll() 返回符合条件的所有节点

                通过.style.xxx的方式只能访问内联的css样式

                获取当前的有效样式
                    getComputedStyle(div1)['height'] //火狐、谷歌
                
                getAttribute()
                setAttribute()
                removeAttribute()
                可以访问设置移除自定义的属性、class访问(不用className)

                innerHTML 获取标签间内容 会解析标签
                innerText 获取标签间纯文本 不会解析标签，设置纯文本
                outerHTML 从外标签开始到外标签结束 直接替换原来的标签，会解析标签

                访问子节点
                    childNodes 访问当前节点下所有的子节点
                    firstChild 访问子节点中的首位
                    lastChild  访问子节点中的最后一位
                    nextSibling  访问当前节点兄弟节点中的下一个节点
                    previousSibling  访问当前节点兄弟节点中的上一个节点

                    下面这些方法值获取子节点中的元素节点
                    children
                    firstElementChild
                    lastElementChild
                    nextElementSibling
                    previousElementSibling

                
                            nodeType      nodeName      nodeValue
                    元素节点    1           标签名          null
                    属性节点    2           属性名          属性值
                    文本节点    3           #text          文本内容

                    换行空格回车  是字符(文本节点)

                attributes  获取当前元素节点上的所有的属性节点
                    集合：
                        1.无序
                        2.不重复
                    div1.attributes['class'].nodeName

                document.write() 会覆盖页面上原有的内容
                document.createElement 参数：标签名   返回值：创建好的这个节点
                node1.appendChild(node2) 将node2节点插入到node1节点子节点的末尾
                document.createTextNode() 创建文本节点(纯文本)
                box1.parentNode.insertBefore(box2,box1) 将box2添加到box1的前面
                box1.parentNode.replaceChild(box2,box1) 用box2节点将box1节点替换掉
                node.cloneNode()  返回克隆出来的新节点 不包括子节点
                node.cloneNode(true)  克隆节点本身包括子节点
                box.parentNode.removeChild(box) 将box节点删除
        */
       window.onload = function(){
            var div1 = document.getElementById('div1');
       }
    </script>
</head>
<body>
    <div id="div1" class="box" style="height:100px">div文本</div>
</body>
</html>